<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2023/12/3
  Time: 23:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>朋友圈</title>
  <link rel="stylesheet" href="static/css/Feed.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css'>
  <style>

    .module-blog {
      margin-top: 50px;
    }
    .module-blog .module-blog-img img {
      width: 10px;
      max-height: 150px;
    }
    .module-blog .social-media {
      display: flex;
      justify-content: center;
    }
    .module-blog .social-media .social-media-comment,
    .module-blog .social-media .social-media-like,
    .module-blog .social-media a {
      padding-left: 10px;
      padding-right: 10px;
      color: #bfbfbf;
    }
    .module-blog .social-media .like {
      cursor: pointer;
    }
    .module-blog .social-media .like.liked:before {
      color: #cb0000;
    }
    .module-blog .social-media .like.unliked {
      color: #bfbfbf;
    }
  </style>
</head>
<body onclick="loadImages()">
<!-- partial:index.partial.html -->
<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="module-blog">
        <div class="module-blog-img">
          <img style="width: 450px;height: 500px" src="static/img/pexels-muhammet-cengi̇zov-19017576.jpg">
        </div>
        <div class="module-blog-content">
          <p class="category">
            <a href="#"></a>
          </p>
          <h3 class="title" id="username">用户名  </h3>
          <h3 id="type">类别： </h3>
          <p class="text" id="imgId"></p>
          <div style="display: inline">
          <div class="social-media" >
            <div class="social-media-comment" onclick="fetchComments('your_image_id')">
              <span>1</span>
              <span class="fa fa-comments"></span>
            </div>
            <div class="social-media-like">
              <div class="social-media-like-wrapper">
                <span class="like-total" data-like-total="20">20</span>
                <span class="like fa fa-heart" data-like="false"></span>
              </div>
            </div>
            <a href="#"><img src="static/img/举报_report.png" style="width: 20px;height: 20px;"></a>
          </div>
        </div>
        </div>
      </div>
      <form action="#">
        <textarea name="comment" id="comment" cols="30" rows="10" placeholder="写点什么吧···"></textarea>
        <br />
        <input type="submit" value="评论" />
      </form>
    </div>


  </div>
  <!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <script  src="static/js/Feed.js"></script>

</div>

<div class="comments-container" style="display: none;">
  <div id="comments-list">
    <!-- 这里会动态添加评论内容 -->
  </div>
  <button class="close-comment-btn" onclick="closeComments()">关闭</button>
</div>


</body>
</html>
